<template>
    <div class="container">
        <div class="monitor">
            <div class="content" v-if="dataFlag">
                <div class="title">
                    <Tabs  v-model="tabActiveName"  @on-click="setTabClick">
                        <TabPane v-for="item in list" :value="item.id" :key="item.id" :label="item.code" ></TabPane>
                    </Tabs>
                </div>
                <div class="content_img">
                     <div class="imgBox gantyImg">
                         <div class="ganty_dh">
                             <img src="./../../assets/images/fse/gantry/gantry_03.png" class="img2" />
                             <div class="path">
                                <div class="right">
                                    <span class="span1"></span>
                                    <img src="./../../assets/images/fse/gantry/gantry_04.png" class="img1" />
                                </div>
                                 <div class="left">
                                     <span class="span2"></span>
                                     <img src="./../../assets/images/fse/gantry/gantry_04.png" class="img1" />
                                 </div>
                             </div>
                         </div>
                     </div>
                </div>
                <div class="bottom">
                    <div class="box">
                        <div class="ganty item">
                            <div class="sub">大车运行状态</div>
                            <p @click="getMsg(0)">
                                <span>刚腿位移:</span>
                                <span class="num">{{rigidLegShift}}m</span>
                            </p>
                            <p @click="getMsg(1)">
                                <span>柔腿位移:</span>
                                <span class="num">{{softLegShift}}m</span>
                            </p>
                            <p @click="getMsg(2)">
                                <span>运行偏斜:</span>
                                <span class="num">{{runningTurn}}m</span>
                            </p>
                        </div>
                        <div class="ganty item">
                            <div class="sub">小车运行状态</div>
                            <p @click="getMsg(3)">
                                <span>位移:</span>
                                <span class="num">{{shift}}m</span>
                            </p>
                            <p @click="getMsg(4)">
                                <span>主钩起升高度:</span>
                                <span class="num">{{mainHookLiftHeight}}m</span>
                            </p>
                            <p @click="getMsg(5)">
                                <span>副钩起升高度:</span>
                                <span class="num">{{subHookLiftHeight}}m</span>
                            </p>
                            <p @click="getMsg(6)">
                                <span>主钩起升重量:</span>
                                <span class="num">{{mainHookLiftWeight}}t</span>
                            </p>
                            <p @click="getMsg(7)">
                                <span>副钩起升重量:</span>
                                <span class="num">{{subHookLiftWeight}}t</span>
                            </p>
                        </div>
                        <div class="ganty item">
                            <div class="sub">其他状态</div>
                            <p @click="getMsg(8)">
                                <span>风速:</span>
                                <span class="num">{{windSpeed}}m/s</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content nodata" v-if="!dataFlag"> 暂无龙门吊设备,请在龙门吊设备页,添加并绑定龙门吊设备</div>
        </div>
        
        <Modal v-model="msgModal" title="历史数据" width="1000px;" :mask-closable="false" :footer-hide="true">
            <div class="log">
                <div class="list">
                    <div class="item">
                        <span>数据类型:</span>
                        <span>{{ msgType }}</span>
                    </div>
                    <div class="item">
                        <span>选择日期:</span>
                        <DatePicker type="date" :options="options" placeholder="请选择日期" style="width: 200px" format="yyyy-MM-dd" v-model="msgTime" :clearable="false"></DatePicker>
                        <el-button type="primary" @click="searchLog" style="margin-left:20px;" size="small" plain>搜索</el-button>
                    </div>
                </div>
                <div class="echarts" >
                    <div class="canvas_none" v-if="dateList.length==0"><img src="../../assets/images/common/canvas_none1.png" alt=""></div>
                    <div id="line" :style="{ height: '400px', width: '800px' }" ></div>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
import {getGantryMonitor, getGantryLog, getGantryList,} from "@/api/api.js";
import {format} from "@/sever/utils";
export default {
    data(){
        return{
            tabActiveName: "",
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            deptId: "",
            list: [],
            dataFlag: false,
            activeId: -1,
            gantryId: "",
            rigidLegShift: "",
            softLegShift: "",
            runningTurn: "",
            shift: "",
            mainHookLiftHeight: "",
            subHookLiftHeight: "",
            mainHookLiftWeight: "",
            subHookLiftWeight: "",
            windSpeed: "",
            height:"",
            msgModal: false,
            msgType: "",
            msgTime: new Date(),
            timeList: [],
            dateList: [],
            count: 0,
            msgName: "",
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.getAllList();
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getAllList();
    },
    methods: {
        setTabClick(name) {
            this.activeId = this.list[name].gantryId;
            this.gantryId = this.list[name].gantryId;
            this.getGantryDate();
        },
        getAllList() {
            let params = {
                deptId: this.deptId,
                bindFlag:1,
            };
            getGantryList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        if (res.data.list.length == 0) {
                            this.dataFlag = false;
                            this.gantryId = "";
                            this.activeId = -1;
                        } else {
                            this.gantryId = res.data.list[0].gantryId;
                            this.activeId = res.data.list[0].gantryId;
                            this.dataFlag = true;
                            this.getGantryDate();
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getGantryDate() {
            let params = {
                gantryId: this.gantryId
            };
            getGantryMonitor(params).then(res => {
                if (res.code == 200) {
                    this.rigidLegShift = res.data.rigidLegShift || 0;
                    this.softLegShift = res.data.softLegShift || 0;
                    this.runningTurn = res.data.runningTurn || 0;
                    this.shift = res.data.shift || 0;
                    this.mainHookLiftHeight = res.data.mainHookLiftHeight || 0;
                    this.subHookLiftHeight = res.data.subHookLiftHeight || 0;
                    this.mainHookLiftWeight = res.data.mainHookLiftWeight || 0;
                    this.subHookLiftWeight = res.data.subHookLiftWeight || 0;
                    this.windSpeed = res.data.windSpeed || 0;
                    this.height = res.data.height || 0;
                    //主钩
                    let h = 70 + this.mainHookLiftHeight;
                    //复钩
                    let h1 = 70 + this.subHookLiftHeight;
                    let width = 3.2;
                    let w = width + this.shift/100;
                    $(".ganty_dh").animate({left:  w +'rem'});
                    $(".span1").animate({height:h+'px'});
                    $(".span2").animate({height:h1+'px'});
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error)
            })
        },
        getMsg(type) {
            this.msgTime = new Date();
            if (type == 0) {
                this.msgType = "大车刚腿位移";
                this.msgName = "米（m）";
            } else if (type == 1) {
                this.msgType = "大车柔腿位移";
                this.msgName = "米（m）";
            } else if (type == 2) {
                this.msgType = "大车运行偏斜";
                this.msgName = "米（m）";
            } else if (type == 3) {
                this.msgType = "小车位移";
                this.msgName = "米（m）";
            } else if(type == 4){
                this.msgType = "小车主钩起升高度";
                this.msgName = "米（m）";
            } else if (type == 5) {
                this.msgType = "小车副钩起升高度";
                this.msgName = "米（m）";
            } else if (type == 6) {
                this.msgType = "小车主钩起升重量";
                this.msgName = "吨（t）";
            } else if (type == 7) {
                this.msgType = "小车副钩起升重量";
                this.msgName = "吨（t）";
            } else if (type == 8) {
                this.msgType = "风速";
                this.msgName = "米每秒（m/s）";
            }
            this.count = type;
            this.getLogMsg(type);
        },
        searchLog() {
            this.getLogMsg(this.count);
        },
        getLogMsg(type) {
            this.timeList = [];
            this.dateList = [];
            let params = {
                gantryId: this.gantryId,
                time: format(this.msgTime, "YYYY-MM-DD")
            };
            getGantryLog(params)
                .then(res => {
                    if (res.code == 200) {
                        this.msgModal = true;
                        if (res.data.list.length > 0) {
                            res.data.list.forEach(i => {
                                this.timeList.push(i.time);
                                if (type == 0) {
                                    this.dateList.push(i.rigidLegShift);
                                } else if (type == 1) {
                                    this.dateList.push(i.softLegShift);
                                } else if (type == 2) {
                                    this.dateList.push(i.runningTurn);
                                } else if (type == 3) {
                                    this.dateList.push(i.shift);
                                } else if (type == 4){
                                    this.dateList.push(i.mainHookLiftHeight);
                                }else if (type == 5) {
                                    this.dateList.push(i.subHookLiftHeight);
                                } else if (type == 6) {
                                    this.dateList.push(i.mainHookLiftWeight);
                                } else if (type == 7) {
                                    this.dateList.push(i.subHookLiftWeight);
                                } else if (type == 8) {
                                    this.dateList.push(i.windSpeed);
                                }
                            });
                        }
                        this.darwLine();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        darwLine() {
            let line = this.$echarts.init(document.getElementById("line"));
            line.setOption({
                color: ["rgb(255, 179, 94)"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: ""
                    }
                    // formatter: "{b0}<br/>{a0}: {c0}"
                },
                grid: {
                    top: "18%",
                    left: "50px",
                    right: "14px",
                    bottom: "5%",
                    containLabel: true
                },
                xAxis: {
                    data: this.timeList,
                    name: "时间",
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    show: true,
                    name: this.msgName,
                    splitLine: {
                        //去除网格线
                        show: false
                    },
                },
                series: [
                    {
                        name: this.msgName,
                        type: "line",
                        smooth: true ,
                        data: this.dateList,
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                // label: {
                                //   show: true, //开启显示
                                //   position: "top", //在上方显示
                                //   textStyle: {
                                //     //数值样式
                                //     color: "#02C0C0",
                                //     fontSize: 16
                                //   }
                                // },
                                lineStyle: {
                                    color: "#1891FF" //折线的颜色
                                },
                                color: "#2BB6FF"
                            }
                        }
                    }
                ]
            });
        }
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style scoped lang = "scss" >
@import "./../../assets/style/fse_monitor.scss";
</style >
